<template>
  <div class="app-container">
    <el-form  ref="queryForm"  label-width="85px">
      <div class="base-info-item">
        <h4>基本信息</h4>
        <div class="form-item-view">
          <el-form-item label="商品分类" >
          <span v-for="(item, index) in goods.categoryName" :key="index">
                {{ item }}
                <i v-if="index !== goods.categoryName.length - 1">&gt;</i>
              </span>
          </el-form-item>
          <el-form-item label="商品名称" >
            {{ goods.goodsName }}
          </el-form-item>
          <el-form-item label="商品卖点" >
            {{ goods.sellingPoint }}
          </el-form-item>
        </div>

        <h4>商品交易信息</h4>
        <div class="form-item-view">
          <el-form-item label="计量单位" >
            {{ goods.goodsUnit }}
          </el-form-item>
          <el-form-item label="销售模式" >
            {{ goods.salesModel === "RETAIL" ? "零售型" : "批发型" }}
          </el-form-item>
          <el-form-item label="销售规则"  v-if="goods.salesModel !== 'RETAIL'">
            <el-table  :data="wholesaleData" border >
              <el-table-column label="销售规则" align="center"  prop="name" >
                <template slot-scope="scope">
                  当商品购买数量 ≥ {{scope.row.num}} 时，售价为 ￥ {{scope.row.price}} / {{goods.goodsUnit}}
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </div>

        <h4>商品规格及图片</h4>
        <div class="form-item-view">
          <el-form-item label="商品编号" >
            {{ goods.id }}
          </el-form-item>
          <el-form-item label="商品价格" >
            ¥{{ goods.price | unitPrice }}
          </el-form-item>
          <el-form-item label="商品图片" >
            <div
              class="demo-upload-list"
              v-for="(item, __index) in goods.goodsGalleryList"
              :key="__index"
            >

              <el-popover
                placement="right"
                title="商品图片"
                width="300"
                trigger="hover"
              >
                <div style="text-align: center">
                  <img
                    :src="item"
                    style="width: 100%"
                  />
                </div>
                <div  slot="reference">
                  <img :src="item" />
                  <div class="demo-upload-list-cover">
                    <i class="el-icon-view"></i>
                  </div>
                </div>
              </el-popover>
            </div>
          </el-form-item>
          <el-form-item label="商品规格" >
            <el-table  :data="skuData" border >
              <el-table-column label="规格" align="center"  prop="specs" />
              <el-table-column label="编号" align="center" prop="sn"/>
              <el-table-column label="重量(kg)" align="center" prop="weight"/>
<!--              <el-table-column label="成本" align="center" prop="cost"/>-->
<!--              <el-table-column label="价格" align="center" prop="price"/>-->
<!--              <el-table-column label="图片" align="center" prop="image"/>-->
            </el-table>
          </el-form-item>
        </div>

        <h4>商品详情描述</h4>
        <div class="form-item-view">
          <el-tabs  v-model="activeName">
            <el-tab-pane label="商品描述" name="intro">
              <div v-html="goods.intro"></div>
            </el-tab-pane>
            <el-tab-pane label="移动端描述" name="mobileIntro">
              <div v-html="goods.mobileIntro"></div>
            </el-tab-pane>
          </el-tabs>


        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import { getGoodsDetail } from "@/api/mall/goods/goods";
export default {
  name: "goodsDetail",
  props: {
    goodsId: {
      type: String
    },
  },
  data() {
    return {
      activeName: 'intro',
      goods: {}, // 商品信息
      previewGoodsPicture: "", // 预览图片
      goodsPictureVisible: false, // 预览图片模态框
      wholesaleData: [],
      skuData: [], // sku数据
    };
  },
  mounted() {
    this.initGoods();
  },
  methods: {
    // 初始化数据，获取商品详情
    initGoods() {
      getGoodsDetail(this.goodsId).then((res) => {
        this.goods = res.data;
        let that = this;
        res.data.skuList.forEach(function (sku, index, array) {
          that.skuData.push({
            specs: sku.goodsName,
            sn: sku.sn,
            weight: sku.weight,
            cost: that.$options.filters.unitPrice(sku.cost, "¥"),
            price: that.$options.filters.unitPrice(sku.price, "¥"),
            image: sku.thumbnail,
          });
        });
        if (res.data.salesModel === "WHOLESALE" && res.data.wholesaleList) {
          res.data.wholesaleList.forEach((item, index) => {
            this.skuColumn.push({
              title: "购买量 ≥ " + item.num,
              slot: "wholePrice" + index,
            });
          });
        }
        this.wholesaleData = res.data.wholesaleList;

        console.log("sku:  " + JSON.stringify(that.skuData))
      });
    },
    // 预览商品图片
    handleViewGoodsPicture(url) {
      this.previewGoodsPicture = url;
      this.goodsPictureVisible = true;
    },
  },
};
</script>

<style lang="scss" soped>
/*平铺*/
div.base-info-item {
  h4 {
    margin-bottom: 10px;
    padding: 0 10px;
    border: 1px solid #ddd;
    background-color: #f8f8f8;
    font-weight: bold;
    color: #333;
    font-size: 14px;
    line-height: 40px;
    text-align: left;
  }

  .form-item-view {
    padding-left: 80px;
  }
}

.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
.ivu-table table {
  width: 100% !important;
}
</style>
